<template>
  <div class="AppHeaderContainer">
    <div class="headerLogo"></div>
    <div class="headerLeft">
      <div class="headerSearch">
        <div class="iconCircle" style="margin-right: 16px">
          <el-icon :size="16" color="#fff"><ArrowLeft /></el-icon>
        </div>
        <div class="iconCircle" style="margin-right: 16px">
          <el-icon :size="16" color="#fff"><ArrowRight /></el-icon>
        </div>
        <div class="headerInputCont">
          <el-icon :size="18" color="#fff" style="margin: 0 5px">
            <Search
          /></el-icon>
          <input type="text" :value="searchWord" @input="appInputChange" />
        </div>
        <div class="iconCircle2" @click="microphoneClick()">
          <el-icon :size="18" color="#fff"><Microphone /></el-icon>
        </div>
      </div>
      <div class="userPanel">
        <img
          class="avatar"
          :src="loginStroe.userData?.avatarUrl + '?param=40y40'"
        />
        <div class="opentag" @click="handleOpenLogin">
          <span v-if="!loginStroe.loginSuccess">请登录</span>
          <span v-else>{{ loginStroe.userData?.nickname }}</span>
        </div>
      </div>
    </div>
  </div>
  <el-dialog
    v-model="showLoginDialog"
    :modal="false"
    align-center
    :width="350"
    :close-on-click-modal="false"
    @close="manualClose"
  >
    <div class="QRLogin" v-if="loginStroe.loginType === 0">
      <div class="loginTitle">扫码登录</div>
      <div class="qrImg">
        <div class="cover" v-if="shouldRefresh">
          <div class="refreshIcon" @click="loginStroe.refreshQRCode()">
            <el-icon :size="30"><Refresh /></el-icon>
          </div>
          <span>刷新二维码</span>
        </div>
        <img :src="loginStroe.qrimg" alt="" />
      </div>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
import useLoginStore from "@/stores/login";
import { storeToRefs } from "pinia";

const searchWord = ref("");
const showLoginDialog = ref(false);
const loginStroe = useLoginStore();
const { shouldRefresh, loginSuccess } = storeToRefs(loginStroe);

const appInputChange = (event: Event) => {
  searchWord.value = (event.target as HTMLInputElement).value;
};

const microphoneClick = () => {
  console.log(searchWord.value);
};

const manualClose = () => {
  loginStroe.stopLoopCheckQRLoginState();
  showLoginDialog.value = false;
};

const handleOpenLogin = () => {
  if (!loginStroe.loginSuccess) {
    if (showLoginDialog.value === false) {
      loginStroe.fetchQRKey();
      loginStroe.startLoopCheckQRLoginState();
    } else {
      loginStroe.stopLoopCheckQRLoginState();
    }
    showLoginDialog.value = !showLoginDialog.value;
  } else {
    //todo 推出登录弹框
  }
};
watch(
  () => shouldRefresh,
  (n, o) => {
    if (n.value === true) {
    }
  }
);

watch(
  () => loginSuccess,
  (n, o) => {
    if (n.value === true) {
      showLoginDialog.value = false;
    }
  }
);
</script>

<style scoped lang="less">
.AppHeaderContainer {
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  background-color: #d989b1;
  .headerLogo {
    width: 200px;
    display: flex;
    align-items: center;
    height: 60px;
  }
  .headerLeft {
    flex: 1;
    display: flex;
    align-items: center;
    height: 60px;
    justify-content: space-between;
    .headerSearch {
      height: 100%;
      display: flex;
      align-items: center;
      .iconCircle {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background-color: rgba(255, 255, 255, 0.2);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .iconCircle2 {
        width: 32px;
        height: 32px;
        margin-left: 16px;
        border-radius: 50%;
        background-color: rgba(255, 255, 255, 0.2);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .headerInputCont {
        width: 160px;
        height: 32px;
        border-radius: 16px;
        background-color: rgba(255, 255, 255, 0.2);
        display: flex;
        overflow: hidden;
        align-items: center;
        input {
          outline: none;
          border: none;
          height: 100%;
          width: 130px;
          line-height: 32px;
          color: #fff;
          background-color: transparent;
        }
      }
    }
    .userPanel {
      padding-right: 26px;
      display: flex;
      .avatar {
        height: 24px;
        width: 24px;
        border-radius: 12px;
        background: #fff;
        margin-right: 5px;
      }
      .opentag {
        color: #fff;
        font-size: 14px;
        span {
          cursor: pointer;
        }
      }
    }
  }
}

.QRLogin {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .loginTitle {
    margin-top: 40px;
    margin-bottom: 20px;
    font-size: 26px;
    text-align: center;
    color: #333;
  }
  .qrImg {
    width: 180px;
    height: 180px;
    position: relative;

    .cover {
      background-color: rgba(255, 255, 255, 0.9);
      display: flex;
      flex-direction: column;
      position: absolute;
      align-items: center;
      justify-content: center;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      .refreshIcon {
        cursor: pointer;
        margin-bottom: 16px;
      }
      color: #333;
    }
    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
